<template>
  <el-form label-position="top" ref="formRef" :model="dataForm" :rules="dataRule" v-loading="formLoading" element-loading-text="Submitting...">
    <view class="schedule-card">
      <view class="header" :gutter="20">
        <view class="machine_logo">
          <el-image src="/src/assets/images/schedule/normal.png"/>
        </view>
        <view class="machine_id">
          <el-form-item prop="machine_id">
            <el-select class="input" v-model="dataForm.machine_id" :placeholder="$t('business.publish.template.schedule.machine_id')" clearable>
              <el-option v-for="(v,k) in machineList" :label="v.title" :key="k" :value="v.id"></el-option>
            </el-select>
          </el-form-item>
        </view>
        <view class="shipowner_name">
          <text>船东名称</text>
        </view>
      </view>

      <view class="title">
        <view class="left">
          <view class="load-tag">起始港</view>
        </view>
        <view class="right">
          <view class="ship_name">
            <el-form-item prop="ship_name">
              <el-input class="input" v-model="dataForm.ship_name" :placeholder="$t('business.publish.template.schedule.ship_name')" clearable></el-input>
            </el-form-item>
          </view>
          <view class="voyage_number">
            <el-form-item prop="voyage_number">
              <el-input class="input" v-model="dataForm.voyage_number" :placeholder="$t('business.publish.template.schedule.voyage_number')" clearable></el-input>
            </el-form-item>
          </view>
        </view>
      </view>

      <view class="load" v-for="(route, key) in dataForm.route" :key="key">
        <view class="harbor">
          <el-form-item prop="harbor_code">
            <el-select class="input" v-model="route.harbor_code" :placeholder="$t('business.publish.template.schedule.harbor_code')" :remote-method="loadHarborList" :loading="loading" @visible-change="loadDefaultHarborList()" reserve-keyword filterable remote clearable>
              <el-option v-for="(v, k) in harborList" :label="v.english_name" :key="k" :value="v.code"></el-option>
            </el-select>
          </el-form-item>
        </view>
        <view class="datetime">
          <el-form-item prop="transit_time">
            <el-date-picker class="input" v-model="route.transit_time" type="daterange" :range-separator="$t('business.publish.template.schedule.to')" :start-placeholder="$t('business.publish.template.schedule.start_time')" :end-placeholder="$t('business.publish.template.schedule.end_time')">
            </el-date-picker>
          </el-form-item>
        </view>
      </view>

      <view class="handle">
        <el-button class="button" type="success" @click="addRouteOption(dataForm)" v-if="key == (dataForm.route.length - 1)">{{ $t('business.publish.template.schedule.add_route') }}</el-button>

        <el-button class="button" type="danger" @click="removeRouteOption(dataForm, route)" v-if="dataForm.route.length != 1">{{ $t('business.publish.template.schedule.remove_route') }}</el-button>
      </view>

      <view class="remark">
        <el-form-item :label="$t('business.publish.template.schedule.disclaimer')" prop="disclaimer">
          <el-input class="textarea" type="textarea" v-model="dataForm.remark.disclaimer"></el-input>
        </el-form-item>

        <el-form-item :label="$t('business.publish.template.schedule.remark')" prop="remark">
          <el-input class="textarea" type="textarea" v-model="dataForm.remark.remark"></el-input>
        </el-form-item>
      </view>

      <view class="manager">
        <el-form-item :label="$t('business.publish.template.schedule.manager_id')" prop="manager_id">
          <el-select class="input" v-model="dataForm.manager_id" :placeholder="$t('common.please_select')+$t('business.publish.template.schedule.manager_id')" filterable multiple :multiple-limit="4" clearable>
            <el-option v-for="(v,k) in managerList" :label="v.title" :key="k" :value="v.id"></el-option>
          </el-select>
        </el-form-item>
      </view>


      <view class="load" v-for="(route, key) in dataForm.route" :key="key">
        <el-row :gutter="20" v-if="route.is_price == 1">
          <el-col :span="8">
            <el-form-item :label="$t('business.publish.template.schedule.vehicle')" prop="price1">
              <el-input class="input" v-model="route.price1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('business.publish.template.schedule.equipment')" prop="price2">
              <el-input class="input" v-model="route.price2"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('business.publish.template.schedule.steel')" prop="price3">
              <el-input class="input" v-model="route.price3"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8" v-if="route.is_price == 1">
            <el-form-item :label="$t('business.publish.template.schedule.ton_bag')" prop="price4">
              <el-input class="input" v-model="route.price4"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('business.publish.template.schedule.is_price')" prop="is_price">
              <el-radio-group class="input" v-model="route.is_price">
                <el-radio :label="1">{{ $t('business.publish.template.schedule.show') }}</el-radio>
                <el-radio :label="0">{{ $t('business.publish.template.schedule.hidden') }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <view class="line-bottom"></view>
      </view>

    </view>
  </el-form>
</template>

<script setup name="publish-template-schedule">
  import { useBase } from "@/hooks/base/useBase"
  import { useForm } from "@/hooks/form/useForm"
  import { isEmpty } from '@/utils/validate'

  const { router, query, i18n, isAuth } = useBase()

  const machineList = ref([])
  const managerList = ref([])
  const harborList = ref([])
  const formLoading = ref(false)

  const dataForm = reactive({
    id: '',
    machine_id: '',
    ship_name: '',
    voyage_number: '',
    route: [{
      harbor_code: '',
      transit_time: '',
      is_price: 0,
      price1: '',
      price2: '',
      price3: '',
      price4: '',
    }],
    remark: {
      disclaimer: '',
      remark: '',
    },
    manager_id: [],
  })

  const dataRule = reactive({
    publish_time: [{
      required: true,
      message: i18n('business.publish.template.schedule.rules.publish_time.require'),
      trigger: 'blur',
    }],
  })

  // 获取运输工具数据
  const loadMachineList = () => {
    $http({
      url: $http.adornUrl(`/business/information/machine/select`),
      method: 'get',
      params: $http.adornParams({
        category_id: 1
      }),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        machineList.value = data.data
      } else {
        $message.error(data.message)
      }
    })
  }


  // 获取运输工具数据
  const loadManagerList = () => {
    $http({
      url: $http.adornUrl(`/business/manager/select`),
      method: 'get',
      params: $http.adornParams({
        shipowner_id: dataForm.shipowner_id
      }),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        managerList.value = data.data
      } else {
        $message.error(data.message)
      }
    })
  }


  const loadDefaultHarborList = () => {
    $http({
      url: $http.adornUrl(`/business/publish/template/harbor/select`),
      method: 'get',
      params: $http.adornParams({
        shipowner_id: dataForm.shipowner_id
      }),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        harborList.value = data.data
      } else {
        $message.error(data.message)
      }
    })
  }


  // 获取航线所属港口数据
  const loadHarborList = (name) => {
    if (name) {
      $http({
        url: $http.adornUrl(`/business/publish/template/harbor/select`),
        method: 'get',
        params: $http.adornParams({
          shipowner_id: dataForm.shipowner_id,
          keyword: name,
        }),
      }).then(({ data }) => {
        if (data && data.status === 200) {
          harborList.value = data.data
        } else {
          $message.error(data.message)
        }
      })
    } else {
      harborList.value = []
    }
  }

  // 添加船期选项组
  const addScheduleOption = (data) => {
    // 校验
    if (data.schedule.length > 0) {
      let option = data.schedule[data.schedule.length - 1]
      if (isEmpty(option.machine_id)) {
        $message.error(i18n('common.please_select') + i18n('business.publish.template.schedule.machine_id'));
        return
      }
      data.schedule.push({ id: '', machine_id: '', title: '', voyage_number: '', route: [{ harbor_code: '', transit_time: '', is_price: 0, price1: '', price2: '', price3: '', price4: '' }], remark: {disclaimer: '', remark: ''}, manager_id: [] })
    } else {
      data.schedule.push({ id: '', machine_id: '', title: '', voyage_number: '', route: [{ harbor_code: '', transit_time: '', is_price: 0, price1: '', price2: '', price3: '', price4: '' }], remark: {disclaimer: '', remark: ''}, manager_id: [] })
    }
  }

  // 删除船期选项组
  const removeScheduleOption = (data, item) => {
    let index = data.schedule.indexOf(item)
    if (index !== -1) {
      data.schedule.splice(index, 1)
    }
  }

  const disabledDate = (time) => {
    return time.getTime() >= Date.now()
  }

  onMounted(() => {
    loadManagerList()
    loadMachineList()
    loadDefaultHarborList(false)
  })
</script>


<style lang="scss" scoped>
  .schedule-card {
    display: block;
    border: 1px #e1e1e1 solid;
    border-radius: 20px;
    margin: 0 0 10px 0;
    padding: 0 20px 20px 20px;

    .header {
      display: flex;
      border-radius: 20px 20px 0 0;
      margin: 0 -20px !important;

      .machine_logo {
        width: 3%;
        margin-left: 10px;
        align-content: center;
        .el-image {
          width: 25px;
          height: 25px;
        }
      }
      .machine_id {
        width: 47%;
        align-content: center;
      }
      .shipowner_name {
        width: 50%;
        margin-right: 10px;
        align-content: center;
        text-align: right;
      }
    }

    .title {
      display: flex;
      margin: 10px 0;

      .left {
        width: 50%;
        display: flex;
        .load-tag {
          align-content: center;
        }
      }
      .right {
        width: 50%;
        display: flex;
        align-content: center;
        justify-content: end;

        .ship_name {
          margin-right: 10px;
        }

        .voyage_number {

        }
      }
    }

    .load {
      display: flex;
      margin: 10px 0;

      .harbor {
        width: 50%;
        display: flex;
        .load-tag {
          align-content: center;
        }
      }
      .datetime {
        width: 50%;
        display: flex;
        align-content: center;
        justify-content: end;

        .ship_name {
          margin-right: 10px;
        }

        .voyage_number {


        }
      }
    }


    .el-row {
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }
      .route-button {
        .button:nth-child(1) {
          margin-left: 12vh;
        }
        .button:nth-child(2) {
          margin-left: 2vh;
        }
      }
    }
    .route {
      margin-bottom: 10px;
    }
    .line {
      border-top: #d3dce6 1px solid;
      margin: 10px 20px;
    }
    .line-top {
      border-top: #d3dce6 1px solid;
      margin: 0 20px 10px 20px;
    }
    .line-bottom {
      border-bottom: #d3dce6 1px solid;
      margin: 0 20px;
    }
  }

  .el-form-item {
    margin-bottom: 5px ;
  }
</style>
